<template>
  <div class="home">
    <div class="box">
      <div class="banner_box">
        <div class="g_warp g_pointer autocenter banner" />
      </div>
      <div class="g_warp autocenter recommend">
        <div class="recommend-title">
          <floor-title
            :icon-url="recommendInfo.iconUrl"
            :icon-text="recommendInfo.iconText"
          />
          <more-icon
            :more-url="moreUrl"
            :more-text="moreText"
            more-type="recommend"
          />
        </div>
        <div class="recommend-body">
          <product-page
            v-for="item in productList"
            :key="item.id"
            :p-info="item"
          />
        </div>
      </div>
      <div class="g_warp autocenter exchange">
        <div class="exchange-title">
          <floor-title
            :icon-url="exchangeInfo.iconUrl"
            :icon-text="exchangeInfo.iconText"
          />
          <more-icon
            :more-url="moreUrl"
            :more-text="moreText"
            more-type="exchange"
          />
        </div>
        <div class="exchange-ad g_pointer" />
        <div class="exchange-body">
          <product-page
            v-for="item in productList2"
            :key="item.id"
            :p-info="item"
          />
        </div>
      </div>
      <div class="autocenter strategy">
        <div class="autocenter strategy-title">
          <floor-title
            :icon-url="strategyInfo.iconUrl"
            :icon-text="strategyInfo.iconText"
          />
        </div>
        <div class="strategy-body">
          <integral-card
            v-for="item in cardList"
            :key="item.id"
            :card-info="item"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloorTitle from "./FloorTitle.vue";
import IntegralCard from "./IntegralCard.vue";
import MoreIcon from "./MoreIcon.vue";
import ProductPage from "./ProductPage.vue";

export default {
  components: {
    FloorTitle,
    MoreIcon,
    ProductPage,
    IntegralCard,
  },
  data() {
    return {
      recommendInfo: {
        iconUrl: require("@/assets/img/jingpin.png"),
        iconText: "精品推荐",
      },
      exchangeInfo: {
        iconUrl: require("@/assets/img/hot.png"),
        iconText: "热门兑换",
      },
      strategyInfo: {
        iconUrl: require("@/assets/img/score.png"),
        iconText: "积分攻略",
      },
      moreUrl: require("@/assets/img/arrow.png"),
      moreText: "更多",
      productList: [
        {
          name: "XXX精品T恤",
          integral: "2400",
          id: "1",
          isHot: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200629/c73c4afe-43c6-4d87-9cdd-4db6828059a0.png",
        },
        {
          name: "小狼抱枕1",
          integral: "2200",
          id: "2",
          isHot: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20210315/521d6b69-7353-49dd-8017-992507ee2344.jpg",
        },
        {
          name: "小狼抱枕2",
          integral: "2100",
          id: "3",
          isNew: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200630/126d9b11-fa46-47b3-8081-6e8765340bda.png",
        },
        {
          name: "叩丁狼校园文化衫",
          integral: "99",
          id: "4",
          imgUrl:
            "	http://sc.wolfcode.cn/upload/images/product_images/20220826/e7c4a5f4-cd67-4f31-8271-d5dc927f0309.jpg",
        },
      ],
      productList2: [
        {
          name: "XXX精品T恤",
          integral: "2400",
          id: "1",
          isHot: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200629/c68be5b2-9b81-42a8-893f-b47fe83b25e5.png",
        },
        {
          name: "小狼抱枕1",
          integral: "2200",
          id: "2",
          isHot: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200526/d2717504-84e3-4947-86a1-afcd94fd18fa.png",
        },
        {
          name: "小狼抱枕2",
          integral: "2100",
          id: "3",
          isNew: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200522/d7a4984e-7f92-4a23-a828-118bafe656e7.png",
        },
        {
          name: "叩丁狼校园文化衫",
          integral: "99",
          id: "4",
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200522/f9fd7354-bc33-4dde-a38a-85a06c79aa26.png",
        },
        {
          name: "XXX精品T恤",
          integral: "2400",
          id: "5",
          isHot: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200522/8e9de0ca-eb34-48d4-84fc-031ad803dfe1.png",
        },
        {
          name: "小狼抱枕1",
          integral: "2200",
          id: "6",
          isHot: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200522/35f4c8ad-2af9-4a7b-ac18-2350031c193b.jpg",
        },
        {
          name: "小狼抱枕2",
          integral: "2100",
          id: "7",
          isNew: true,
          imgUrl:
            "http://sc.wolfcode.cn/upload/images/product_images/20200630/126d9b11-fa46-47b3-8081-6e8765340bda.png",
        },
        {
          name: "叩丁狼校园文化衫",
          integral: "99",
          id: "8",
          imgUrl:
            "	http://sc.wolfcode.cn/upload/images/product_images/20220826/e7c4a5f4-cd67-4f31-8271-d5dc927f0309.jpg",
        },
      ],
      cardList: [
        {
          text: "签到得积分",
          btnText: "去签到",
          imgUrl: require("@/assets/img/integral-01.9386d4bf.png"),
          id: "1",
        },
        {
          text: "购课得积分",
          btnText: "去购课",
          imgUrl: require("@/assets/img/integral-02.150d92a1.png"),
          id: "2",
        },
        {
          text: "推荐得积分",
          btnText: "去推荐",
          imgUrl: require("@/assets/img/integral-03.9870f3f1.png"),
          id: "3",
        },
        {
          text: "拼团得积分",
          btnText: "去拼团",
          imgUrl: require("@/assets/img/integral-04.afadcbdf.png"),
          id: "4",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.home {
  background: #f5f5f5;
}
.box {
  margin: 0 auto;
}
.autocenter {
  margin: 0 auto;
}
.autocenter + .autocenter {
  margin-top: 30px;
}
.banner_box {
  background: #fff;
  margin-bottom: 30px;
}
.banner {
  width: 1200px;
  height: 446px;
  background-image: url("@/assets/img/banner.f559b49d.png");
}
.recommend-title,
.exchange-title,
.strategy-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 24px;
}
.recommend-body,
.exchange-body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.exchange-ad {
  width: 1200px;
  height: 180px;
  background-image: url("@/assets/img/ad.4c6b6225.png");
  margin-bottom: 30px;
}
.strategy-title {
  width: 1200px;
}
.strategy {
  padding: 44px 0 48px;
  background: #fff;
}
.strategy-body {
  margin: 0 auto;
  width: 1200px;
  display: flex;
  justify-content: space-between;
}
</style>